<script setup>
import { ref, computed } from "vue";
import ScrollSelect from "../../components/scroll-select/Index.vue";

import { useSerialsStoreHook } from "../../store/modules/serials";

const serials = useSerialsStoreHook();
const baudOptions = [
  { label: "9600", value: "9600" },
  { label: "14400", value: "14400" },
  { label: "19200", value: "19200" },
  { label: "38400", value: "38400" },
  { label: "115200", value: "115200" }
];
const stopBitOptions = [
  { label: "1", value: "1" },
  { label: "1.5", value: "1.5" },
  { label: "2", value: "2" }
];
const dataBitOptions = [
  { label: "8", value: "8" },
  { label: "7", value: "7" },
  { label: "6", value: "6" },
  { label: "5", value: "5" }
];
const parityOptions = [
  { label: "无校验", value: "none" },
  { label: "奇校验", value: "odd" },
  { label: "偶校验", value: "even" }
];

const carouselHeight = computed(() => {
  const height = window.innerHeight - 90;
  return height + "px";
});

const activeItem = ref(0);
function changeEvent(index) {
  activeItem.value = index;
}
</script>

<template>
  <el-carousel
    :autoplay="false"
    trigger="click"
    type="card"
    arrow="always"
    indicator-position="none"
    :height="carouselHeight"
    @change="changeEvent"
  >
    <el-carousel-item v-for="(ser, index) in serials.list" :key="index" class="carousel-item">
      <h3>{{ ser.name }}</h3>
      <el-form label-width="72px" size="large" :disabled="activeItem !== index">
        <el-form-item label="端口">
          <scroll-select
            v-model:value="ser.port"
            :options="serials.available"
            :disabled="ser.opened"
            @click="serials.getSerials"
          />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="波特率">
              <scroll-select
                v-model:value="ser.baud"
                :options="baudOptions"
                :disabled="ser.opened"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="停止位">
              <scroll-select
                v-model:value="ser.stopBit"
                :options="stopBitOptions"
                :disabled="ser.opened"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="数据位">
              <scroll-select
                v-model:value="ser.dataBit"
                :options="dataBitOptions"
                :disabled="ser.opened"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="校验位">
              <scroll-select
                v-model:value="ser.parity"
                :options="parityOptions"
                :disabled="ser.opened"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24" class="btn-box">
            <el-button
              class="btn-connect"
              :type="ser.opened ? 'primary' : 'default'"
              @click="serials.openSerial(index)"
              >{{ ser.opened ? "已 连 接" : "未 连 接" }}</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-carousel-item>
  </el-carousel>
</template>

<style lang="scss" scoped>
.el-carousel__item h3 {
  color: #c1c2c4;
  height: 56px;
  line-height: 56px;
  font-size: 24px;
  margin: 0;
  text-align: center;
}
.el-carousel__item {
  background-color: #000000;
  padding: 0 24px 0 12px;
}
.el-select {
  width: 100%;
}
.btn-box {
  display: flex;
  justify-content: center;
  padding-left: 12px;
}
.btn-connect {
  width: 100%;
  height: 56px !important;
  font-size: 18px;
}
.carousel-item {
  box-sizing: border-box;
}
</style>
